<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .box {
        width: 820px;
        height: 380px;
        margin: 50px auto;
        border: 2px solid wheat;
        position: relative;
      }

      .inner {
        width: 100%;
        height: 340px;
        display: none;
        overflow: hidden;
      }

      .img1 {
        display: block;
        /* background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/59fc14ad5433872c7255361d269b0862.jpeg) center center/cover no-repeat; */
      }

      .img2 {
        /* background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241009/2fd63a8a89b7a787c48a002811549970.jpeg) center center/cover no-repeat; */
      }

      .img3 {
        /* background: url(https://ossweb-img.qq.com/upload/adw/image/977/20240926/6ff9a3b91a118fd01d3027a7184ae7b4.jpeg) center center/cover no-repeat; */
      }

      .img4 {
        /* background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241010/a930e92f486f585dbd4fd36ade1115aa.jpeg) center center/cover no-repeat; */
      }

      .img5 {
        /* background: url(https://ossweb-img.qq.com/upload/adw/image/977/20241011/f3d821ee267bd18f4e0c11582280eca5.jpeg) center center/cover no-repeat; */
      }

      /* 导航部分 */
      .nav {
        width: 100%;
        height: 40px;
        position: absolute;
        bottom: 0px;
        overflow: hidden;
        background-color: #e3e2e2;
      }

      .nav > li {
        float: left;
        width: calc(100% / 5);
        height: 100%;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
      }

      .active {
        background-color: white;
        color: rgb(187, 142, 102);
        font-weight: bold;
      }

      /*按钮容器调整*/
      .btn-wrap {
        color: white;
        position: absolute;
        top: 0;
        right: 0;
        height: 25px;
        background-color: #bb8e66;
      }

      /*页码内容*/
      .inner > div:nth-child(1) {
        width: calc(820px * 3);
        height: 100%;
        /* transition: 2s; */
      }

      .inner > div div {
        float: left;
        width: 820px;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner img1">
        <div>
          <div style="background-color: rgba(255, 0, 0, 0.3)"></div>
          <div style="background-color: rgba(255, 0, 0, 0.6)"></div>
          <div style="background-color: rgba(255, 0, 0, 0.9)"></div>
        </div>
        <div class="btn-wrap">
          <button class="btn-prev">向左</button>
          <span>1/3</span>
          <button class="btn-next">向右</button>
        </div>
      </div>
      <div class="inner img2">
        <div>
          <div style="background-color: rgba(0, 255, 0, 0.3)"></div>
          <div style="background-color: rgba(0, 255, 0, 0.6)"></div>
          <div style="background-color: rgba(0, 255, 0, 0.9)"></div>
        </div>
        <div class="btn-wrap">
          <button class="btn-prev">向左</button>
          <span>1/3</span>
          <button class="btn-next">向右</button>
        </div>
      </div>
      <div class="inner img3">
        <div>
          <div style="background-color: rgba(255, 255, 0, 0.3)"></div>
          <div style="background-color: rgba(255, 255, 0, 0.6)"></div>
          <div style="background-color: rgba(255, 255, 0, 0.9)"></div>
        </div>
        <div class="btn-wrap">
          <button class="btn-prev">向左</button>
          <span>1/3</span>
          <button class="btn-next">向右</button>
        </div>
      </div>
      <div class="inner img4">
        <div>
          <div style="background-color: rgba(255, 0, 255, 0.3)"></div>
          <div style="background-color: rgba(255, 0, 255, 0.6)"></div>
          <div style="background-color: rgba(255, 0, 255, 0.9)"></div>
        </div>
        <div class="btn-wrap">
          <button class="btn-prev">向左</button>
          <span>1/3</span>
          <button class="btn-next">向右</button>
        </div>
      </div>
      <div class="inner img5">
        <div>
          <div style="background-color: rgba(0, 0, 255, 0.3)"></div>
          <div style="background-color: rgba(0, 0, 255, 0.6)"></div>
          <div style="background-color: rgba(0, 0, 255, 0.9)"></div>
        </div>
        <div class="btn-wrap">
          <button class="btn-prev">向左</button>
          <span>1/3</span>
          <button class="btn-next">向右</button>
        </div>
      </div>
      <ul class="nav">
        <li class="active">超级粉丝2024</li>
        <li>全球总决赛 荣耀征程</li>
        <li>T1小小奥莉安娜</li>
        <li>星守小小阿卡丽</li>
        <li>s14赛程</li>
      </ul>
    </div>
    <script>
      //获取所需的inner容器
      let Inners = document.getElementsByClassName("inner");
      //获取的是点击下面的导航部分
      let lis = document.getElementsByTagName("li");
      //为每一个inner容器绑定分页控制
      for (let i = 0; i < Inners.length; i++) {
        //获取当前inner里面我们的分页元素
        let pages = Inners[i]
          .getElementsByTagName("div")[0]
          .getElementsByTagName("div");
        let prev = Inners[i].getElementsByClassName("btn-prev")[0];
        let next = Inners[i].getElementsByClassName("btn-next")[0];
        let textspan = Inners[i]
          .getElementsByClassName("btn-wrap")[0]
          .getElementsByTagName("span")[0];
        let index = 0; //控制页码
        //右点击效果
        next.addEventListener("click", function () {
          index++;
          if (index >= pages.length) {
            index = pages.length - 1;
          }
          this.parentNode.previousElementSibling.style.transform = `translateX(${
            index * -820
          }px)`;
          textspan.innerHTML = index + 1 + "/" + pages.length;
        });
        //左点击效果
        prev.addEventListener("click", function () {
          index--;
          if (index < 0) {
            index = 0;
          }
          this.parentNode.previousElementSibling.style.transform = `translateX(${
            index * -820
          }px)`;
          textspan.innerHTML = index + 1 + "/" + pages.length;
        });
      }
      //为每一个导航li元素绑定事件
      for (let i = 0; i < lis.length; i++) {
        lis[i].index = i;
        lis[i].onclick = function () {
          //隐藏所有的inner容器和li
          for (let j = 0; j < lis.length; j++) {
            lis[j].className = "";
            Inners[j].style.display = "none";
          }
          //选中元素所需要的功能
          lis[this.index].className = "active";
          Inners[this.index].style.display = "block";
        };
      }
    </script>
  </body>
</html>
